<!--
  - 滚球算法 Rolling-Ball Baseline Correction, RBBC
  - 库：ml-rolling-ball-baseline
  - https://cran.r-project.org/web/packages/baseline/baseline.pdf
  - 步骤：
  -   1. 对于某个X点，设一个框windowM，求得框里[x - windowM || 第一个点, x + windowM || 最后一个点]的最小值，得到[最小值的数组]
  -   2. 还是用刚才的框，但是作用在[最小值的数组]上，求框中最大值，求得[最小值数组的最大值的数组]
    3. 再设一个框windowS，作用在2所得的[最小值数组的最大值的数组]上，求得[x - windowS || 第一个点, x + windowS || 最后一个点]框里的均值
    4. 这个均值组成的数组，就是基线。
 -->
 
<!-- 视图层 --><!-- 页头(上) -->
<template><header-comp />

<!-- TFjs初始化组件 -->
<tfjsInit />

<!-- 读取数据 -->
<uni-card title="读取数据">
  <!-- 通告栏 -->
  <uni-notice-bar text=
    "打开含有波谱数据集的Excel文件。"
  />

  <!-- 训练按钮容器及按钮 -->
  <view class="center"><button
    :disabled="!tfBackendRef"
    @click="testMain()"
    size="mini" type="primary"
  >
    运行代码
  </button></view>

  <!-- 打开图表板容器及按钮 -->
  <view class="center"><button
    @click="showVisor()"
    size="mini" type="primary"
  >
    打开图表板
  </button></view>

</uni-card>

<!-- 页脚(下) -->
<footer-comp /></template>

<!-- 逻辑层 -->
<script setup>
// 导入vue的onMounted、ref方法
// import { shallowRef, ref } from "vue"
// 导入tfjs-visor库
import * as tf from "@tensorflow/tfjs"
import * as tfvis from "@tensorflow/tfjs-vis"
// 导入TF初始化组件
import tfjsInit from "../index/tfjs-init.vue"
// 导入xlsx库
// import * as XLSX from "xlsx"

import { rollingBall } from "ml-rolling-ball-baseline"
// 导入公共方法库的方法
import { tfBackendRef, showVisor, aoaTotfvisChart, minToZero, maxToOne } from "../../scripts/app_common.js"
// 导入测试数据集
import { testData } from "../../datasets/test-data.js"


/**
 * @ref对象
 */


/**
 * @其他对象
 */

// 主方法
function testMain() {

  // 记个时
  console.time("rbbc处理耗时")
  console.log("开始对数据进行rbbc处理...")

  // 先处理一下
  minToZero(testData.y, true)
  maxToOne(testData.y)

  // 数据先做个图
  aoaTotfvisChart(
    // 图表类型
    "linechart",
    // 图表容器
    { tab: "数据", name: "原始谱图" },
    // 图表数据：第一个数据
    [testData],
    // 数据序列标签
    ["数据"]
  )

  /**
   * @irbc处理
   */
  const baselineY = rollingBall(
    // 谱图数据，Y
    testData.y,
    {
      // 用于最小化/最大化的本地窗口宽度/2，默认为频谱长度的8%
      windowM: 50,
      // 用于平滑的本地窗口宽度/2，默认为频谱长度的16%
      windowS: 0,
    }
  )

  // 输出耗时
  console.timeEnd("rbbc处理耗时")

  // 得到校正值
  const correctedY = []
  for (let i = 0; i < testData.y.length; i++) {
    correctedY.push(testData.y[i] - baselineY[i])
  }

  // 作图：校正
  const correctedData = {
    x: testData.x,
    y: correctedY,
  }
  aoaTotfvisChart(
    // 图表类型
    "linechart",
    // 图表容器
    { tab: "数据", name: "校正" },
    // 图表数据：第一个数据
    [correctedData],
    // 数据序列标签
    ["校正"]
  )
  
  // 作图：基线
  const baselineData = {
    x: testData.x,
    y: baselineY,
  }
  aoaTotfvisChart(
    // 图表类型
    "linechart",
    // 图表容器
    { tab: "数据", name: "基线" },
    // 图表数据：第一个数据
    [baselineData],
    // 数据序列标签
    ["基线"]
  )

}


</script>
